<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫雷</title>
    <script src="../js/vue3.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/mine.css">

    <!-- <body body onconTextmenu="window.event.returnValue =false"></body>

    <body body onselectstart="return false"></body> -->
    <!-- 
    未完成
     难度选择
     自定义选择
     时间流逝
     笑脸
     雷的图标
    
    -->
</head>

<body>
    <div id="app">
        <div class="content">
            <div class="tab">
                <p class="title">扫雷游戏</p>
                <p class="difficulty"><span @click="base">基础</span> <span @click="middle">中级</span> <span @click="expert">专家</span> <span @click="hell">地狱</span> <span @click="custom">自定义</span></p>
            </div>
            <div class="body">
                <div class="ui">
                    <div class="number">{{flag}}</div>
                    <div :class="['face',{'smile':false},{'sad':false},{'laugh':true}]" @click="repeat"></div>
                    <div class="number">{{time}}</div>
                </div>
                <div class="board">
                    <div class="row" v-for="(col,y) in mine">
                        <div class="col" v-for="(unit,x) in col" @click="sweep(x,y)" @contextmenu.prevent="setFlag(x,y)">
                            <div :class="['num-color-'+mine[y][x],'num-color-',{'bg-red':y==by&&x==bx}]">
                                {{unit}}
                            </div>
                            <div :class="['cover',{'visited':show[y][x]}]">
                                <img src="../img/flag_1.png" width="100%" height="100%" v-if="flags[y][x]">

                            </div>
                        </div>

                    </div>
                </div>


            </div>
        </div>
    </div>
    <script>
        const v_app = Vue.createApp({
            data() {
                return {
                    mine: [],
                    show: [],
                    flags: [],
                    mines: 20,
                    rows: 10,
                    cols: 10,
                    bx: -1,
                    by: -1,
                    flag: 20,
                    time: "000",
                    // -1.游戏失败 0.正常游戏 1.游戏获胜
                    win: 0,
                    //是否第一次点击
                    isFirstClick: true,
                }
            },
            mounted() {
                //初始化棋盘
                // 1.布棋盘 2.布遮盖层与插旗数组 3.遮盖层全消失 
                this.mine = this.createBoard(1);
                this.show = this.createBoard(2);
                this.flags = this.createBoard(2);
            },
            methods: {
                //初始化棋盘
                // 1.布棋盘 2.布遮盖层与插旗数组
                createBoard(choose) {
                    let arr = new Array();
                    for (let i = 0; i < this.rows; i++) {
                        arr[i] = new Array();
                        for (let j = 0; j < this.cols; j++) {
                            // 1.布棋盘 2.布遮盖层与插旗数组
                            if (choose == 1) {
                                arr[i][j] = 0;
                            } else {
                                // 2.布遮盖层与插旗数组
                                arr[i][j] = false;
                            }

                        }
                    }
                    return arr;
                },
                //遮盖层消失
                sweepBoard() {
                    for (let i = 0; i < this.rows; i++) {
                        for (let j = 0; j < this.cols; j++) {
                            // 遮盖层消失
                            if (this.mine[i][j] == -1 && !this.flags[i][j]) {
                                this.show[i][j] = true;
                            }

                        }
                    }
                },
                //扫雷点击
                sweep(x, y) {
                    //是否第一次点击
                    if (this.isFirstClick) {
                        //初始化雷区
                        this.createMine(x, y);
                        //初始化数字
                        this.createNumber();
                    }
                    //遮盖点击
                    if (!this.flags[y][x] && this.win == 0) {
                        this.discovered(x, y);
                        if (this.mine[y][x] == -1) {
                            this.sweepBoard();
                            this.bx = x;
                            this.by = y;
                            this.win = -1;
                        }
                        //胜利判断
                        this.checkBlank();
                    }




                },
                //扩散
                discovered(x, y) {
                    this.show[y][x] = true;
                    if (this.mine[y][x] == 0) {
                        for (let k = y - 1; k <= y + 1; k++) {
                            for (let g = x - 1; g <= x + 1; g++) {
                                if (k < this.rows && k >= 0 && g < this.cols && g >= 0) {
                                    if (!this.flags[k][g]) {
                                        if (!this.show[k][g]) {
                                            this.discovered(g, k);
                                        }
                                    }

                                }
                            }
                        }
                    }

                },
                //初始化雷区
                createMine(x, y) {
                    for (let i = 0; i < this.mines;) {
                        let m = Math.floor(Math.random() * this.rows)
                        let n = Math.floor(Math.random() * this.cols)
                        if (m == y && x == n) {
                            continue;
                        }
                        if (this.mine[m][n] < 0) {
                            continue;
                        }
                        this.mine[m][n] = -1;
                        i++;
                        this.isFirstClick = false;
                    }
                },
                //初始化数字
                createNumber() {
                    for (let i = 0; i < this.rows; i++) {
                        for (let j = 0; j < this.cols; j++) {
                            if (this.mine[i][j] < 0) {
                                for (let k = i - 1; k <= i + 1; k++) {
                                    for (let g = j - 1; g <= j + 1; g++) {
                                        if (k < this.rows && k >= 0 && g < this.cols && g >= 0) {
                                            if (this.mine[k][g] >= 0) {
                                                this.mine[k][g]++;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                },
                //插旗
                setFlag(x, y) {
                    if (this.win == 0) {
                        if (this.flags[y][x] == false && this.flag > 0) {

                            this.flag--;
                        } else {

                            this.flag++;
                        }
                        this.flags[y][x] = !this.flags[y][x];
                    }
                },
                //检查剩余空白处
                checkBlank() {
                    let blank = 0;
                    for (let i = 0; i < this.rows; i++) {
                        for (let j = 0; j < this.cols; j++) {
                            //判断剩余未打开的格子
                            if (!this.show[i][j]) {
                                blank++;
                            }
                        }
                    }
                    //当和雷数一样多时,游戏胜利
                    if (blank == this.mines) {
                        this.win = 1;
                    }
                    console.log(blank, this.mines);
                },
                //重置游戏
                repeat() {
                    this.isFirstClick = true;
                    this.win = 0;
                    this.flag = this.mines;
                    this.time = "000";
                    this.mine = this.createBoard(1);
                    this.show = this.createBoard(2);
                    this.flags = this.createBoard(2);
                },
                //难度选择
                //基础难度
                base() {
                    this.mines = 20;
                    this.rows = 10;
                    this.cols = 10;
                    this.repeat();
                },
                //中级难度
                middle() {
                    this.mines = 80;
                    this.rows = 20;
                    this.cols = 20;
                    this.repeat();
                },
                //专家难度
                expert() {
                    this.mines = 180;
                    this.rows = 30;
                    this.cols = 30;
                    this.repeat();
                },
                //地狱难度
                hell() {
                    this.mines = 500;
                    this.rows = 50;
                    this.cols = 50;
                    this.repeat();
                },
                //自定义难度
                custom(minesed, rowsed, colsed) {
                    this.mines = minesed;
                    this.rows = rowsed;
                    this.cols = colsed;
                    this.repeat();
                },

            },
        });
        v_app.mount("#app");
    </script>
</body>


</html>